<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #price-min,
        #price-max {
            width: 50px;
        }
        table {
            border-collapse: collapse;
        }
        td {
            padding: 4px 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form">
            价格区间
            <input id="price-min" type="text"> -
            <input id="price-max" type="text">
            <button id="price-search">按价格搜索</button>
            名称
            <input id="goods-name" type="text">
            <button id="search">搜索</button>
        </div>
        <table border="1">
            <thead>
                <tr>
                    <th>id</th>
                    <th>名称</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <script src="./jq/jq.js"></script>
    <script>

        const data = [
            {
                id: 1,
                name: '小米',
                price: 3999,
            },
            {
                id: 2,
                name: '华为',
                price: 5999,
            },
            {
                id: 3,
                name: '苹果',
                price: 9999,
            },
            {
                id: 4,
                name: 'vivo',
                price: 998,
            },
            {
                id: 5,
                name: 'oppo',
                price: 999,
            },
        ];

        function render (data) {
            const tbody = $('tbody').empty();
            for (const item of data) {
                const tr = $(`
                    <tr>
                        <td>${ item.id }</td>
                        <td>${ item.name }</td>
                        <td>${ item.price }</td>
                    </tr>
                `);
                tbody.append(tr);
            }
        }

        render(data);

        // 按名称搜索
        $('#search').on('click', function () {
            const val = $('#goods-name').val();
            const filteredData = data.filter(function (item) {
                return item.name.includes(val);
            });
            render(filteredData);
        });

        // 按价格搜索
        $('#price-search').on('click', function () {
            const min = $('#price-min').val() || 0;
            const max = $('#price-max').val() || Infinity;
            const filteredData = data.filter(function (item) {
                return item.price >= min && item.price <= max;
            });
            render(filteredData);
        });

        // 手写arr.filter
        Array.prototype.myFilter = function (getCondition) {
            const result = [];
            for (let i = 0; i < this.length; i++) {
                if (getCondition(this[i], i, this)) {
                    result.push(this[i]);
                }
            }
            return result;
        };

        // const arr = [1, 2, 3, 4];
        // console.log(arr.myFilter(function (item, i) {
        //     return item % 2 === 0;
        // })); // [2, 4]

        // 手写find
        Array.prototype.myFind = function (getCondition) {
            for (let i = 0; i < this.length; i++) {
                if (getCondition(this[i], i, this)) {
                    return this[i];
                }
            }
            return undefined;
        };
        // 手写findIndex
        Array.prototype.myFindIndex = function (getCondition) {
            for (let i = 0; i < this.length; i++) {
                if (getCondition(this[i], i, this)) {
                    return i;
                }
            }
            return -1;
        };
        // 手写some  >>  boolean
        Array.prototype.mySome = function (getCondition) {
            for (let i = 0; i < this.length; i++) {
                if (getCondition(this[i], i, this)) {
                    return true;
                }
            }
            return false;
        };
        // map  >>> []
        // 语义化命名
        Array.prototype.myMap = function (getNewItem) {
            const result = [];
            for (let i = 0; i < this.length; i++) {
                const newItem = getNewItem(this[i], i, this);
                result.push(newItem);
            }
            return result;
        };

        // console.log([1, 2, 3].map(function (item, i, arr) {
        //     return item ** 2;
        // }))
        // concat  >>> []
        Array.prototype.myConcat = function (arg) {
            // arg instanceof Array
            // Array.isArray
            const result = [];
            for (const item of this) {
                result.push(item);
            }
            if (Array.isArray(arg)) {
                for (const item of arg) {
                    result.push(item);
                }
            } else {
                result.push(arg);
            }
            return result;
        }

        console.log([1, 2].myConcat([3, 4])); // [1, 2, 3, 4]
        console.log([1, 2].myConcat(3)); // [1, 2, 3]
        // join  >>> string
        Array.prototype.myJoin = function (symbol) {
            let result = '';
            for (let i = 0; i < this.length; i++) {
                const tmp = i === this.length - 1 ? '' : symbol;
                result += this[i] + tmp;
            }
            return result;
        };
        console.log([1, 2, 3].myJoin('+'));
        // sort  >>> []

        // 冒泡排序
        Array.prototype.popSort = function (callback) {
            if (this.length < 2) {
                return this;
            }
            let len = this.length;
            while (len > 1) {
                let k = 0;
                for (let i = 1; i < len; i++) {
                    const a = this[k];
                    const b = this[i];
                    if (callback(a, b) > 0) {
                        k = i;
                    }
                }
                const tmp = this[k];
                this[k] = this[len - 1];
                this[len - 1] = tmp;
                len--;
            }
            return this;
        };

        // 快速排序
        Array.prototype.quickSort = function (callback) {
            if (this.length < 2) {
                return this;
            }
            const a = this[0];
            const left = [];
            const right = [];
            for (let i = 1; i < this.length; i++) {
                const b = this[i];
                if (callback(a, b) > 0) {
                    right.push(b);
                } else {
                    left.push(b);
                }
            }
            return [...left.quickSort(callback), a, ...right.quickSort(callback)];
        };

        // const arr1 = new Array(20).fill(0).map(() => Math.floor(Math.random() * 1000));
        // console.log(arr1.sort((a, b) => b - a));
        // 原生Array.prototype.sort() 在v8引擎中 冒泡排序 xxxxxxxxxx
        // 数组项小于等于8时 插入排序  大于8的时候  快速排序

        function performance (name, cb, count = 1000) {
            console.time(name);
            for (let i = 0; i < count; i++) {
                cb();
            }
            console.timeEnd(name);
        }

        performance('冒泡排序', () => {
            const arr = new Array(2000).fill(0).map(() => Math.floor(Math.random() * 1000));
            arr.popSort((a, b) => b - a);
        });

        performance('快速排序', () => {
            const arr = new Array(2000).fill(0).map(() => Math.floor(Math.random() * 1000));
            arr.quickSort((a, b) => b - a);
        });

        function quickSort (arr) {
            if (arr.length < 2) {
                return arr;
            }
            const tmp = arr[0];
            const left = [];
            const right = [];
            for (let i = 1; i < arr.length; i++) {
                const item = arr[i];
                if (item < tmp) {
                    left.push(item);
                } else {
                    right.push(item);
                }
            }
            // [...left, tmp, ...right]
            return [...quickSort(left), tmp, ...quickSort(right)];
        }

        console.log(quickSort(arr1))

    </script>
</body>
</html>